import React from 'react';
import axios from 'axios';
import moment from 'moment';
import ETable from './../../components/ETable'
import BaseForm from './../../components/BaseForm'
import {Button, Card, Table, Modal,Form, Input, Radio, Select, DatePicker} from 'antd';
import './index.less'


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Option = Select.Option
export default class User extends React.Component{
    state={}
    formList =[
        {
            type:"UserName"
        },
        {
            type:"Pwd"
        },
        {
            type:"DATEPICKER",
            label:"请先选择入职时间",
            field:'user_date',
            placeholder:"请输入日期",
        }
    ]
    onRowClick = (record, index) => {
        let selectKey=[index];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem: record
        })
    }
    handleClick = (type) =>{
        let item = this.state.selectedItem;
        //console.log(item)
        if(type=="create") {
        this.setState({
            type,
            title:"创建员工",
            isShowVisible:true
        })
    }else if(type=="edit") {
        if(!item) {
            Modal.info({
                title:"提示",
                content:"请选择一个用户"
            })
            return
        }
        this.setState({
            isShowVisible:true,
            type,
            title:"编辑员工",
            userInfo:item
        })
    }else if(type=="detail") {
        if(!item) {
            Modal.info({
                title:"提示",
                content:"请选择一个用户"
            })
            return
        }
        this.setState({
            isShowVisible:true,
            type,
            title:"员工详情",
            userInfo:item
        })
    }else{
        if(!item) {
            Modal.info({
                title:"提示",
                content:"请选择一个用户"
            })
            return
        }
        let _this = this;
        Modal.confirm({
            title:"确认删除",
            content:'是否删除当前员工',
            onOk() {
                _this.requierList()
                _this.setState({
                    isShowVisible:false
                    
                })
            }
        })
    }
    }
    componentWillMount() {
        this.requierList()
    }
    handleSubmit = () => {
        // let type = this.state.type;
        // let data = this.userForm.props.form.getFieldsValue();
       
        this.setState({
            isShowVisible:false
        })
        this.userForm.props.form.resetFields()
        this.requierList()
    }
    requierList = () =>{
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/user")
        .then((res) =>{
            this.setState({
                dataSource:res.data.list
            })
        })
    }
    render() {
        const columns = [ 
            {
                title:'id',
                dataIndex:'id'
            },
            {
                title: '用户名',
                dataIndex: 'username'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex=="1"?"男":"女"
                }
            },
            {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    return {
                        "1" : "咸鱼一条",
                        "2" : "鲤鱼打挺",
                        "3" : "啥也不说",
                        "4" : "干就完了",
                        "5" : "风华正茂",
                    }[state]
                }
            },
            {
                title: '爱好',
                dataIndex: 'interest',
                render(interest) {
                    return {
                        "1" : "篮球",
                        "2" : "足球",
                        "3" : "羽毛球",
                        "4" : "棒球",
                        "5" : "垒球",
                        "6" : "壁球",
                        "7" : "乒乓球",
                        "8" : "保龄球",
                    }[interest]
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '联系地址',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                dataIndex: 'time'
            }
        ]
        const rowSelection ={
            type:"radio",
            selectedRowKeys:this.state.selectedRowKeys
        }
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} />
                </Card>
                <Card >
                    <Button onClick={()=>this.handleClick('create')} className="card-wrapper" type="primary">创建员工</Button>
                    <Button onClick={()=>this.handleClick('edit')}className="card-wrapper" type="primary">编辑员工</Button>
                    <Button onClick={()=>this.handleClick('detail')} className="card-wrapper" type="primary">员工详情</Button>
                    <Button onClick={()=>this.handleClick('delete')} className="card-wrapper" type="primary" icon="delete">删除员工</Button>
                </Card>
                <Table
                    columns={columns}
                    dataSource={this.state.dataSource}
                    selectedRowKeys={this.state.selectedRowKeys}
                    rowSelection={rowSelection}
                    onRow={(record,index) => {
                        return{
                            onClick:()=> {
                                this.onRowClick(record,index);
                            }
                        }
                    }}
                >
                    
                </Table>
                <Modal
                    title={this.state.title}
                    visible={this.state.isShowVisible}
                    onOk={this.handleSubmit}
                    onCancel={() =>{
                        this.userForm.props.form.resetFields();
                        this.setState({
                            isShowVisible:false
                        })
                    }}
                >
                    <FilterForm
                    type={this.state.type}
                    wrappedComponentRef={
                        (inst) =>(this.userForm=inst)
                    }
                        userInfo={this.state.userInfo}
                    />
                </Modal>
        </div>
        )
    }
}
class FilterForm extends React.Component{
    getState = (state) => {
        return {
            "1" : "咸鱼一条",
            "2" : "鲤鱼打挺",
            "3" : "啥也不说",
            "4" : "干就完了",
            "5" : "风华正茂",
        }[state]
    }
    render() {
        let type = this.props.type;
        let userInfo = this.props.userInfo || {};
        console.log(userInfo)
        const {getFieldDecorator} =this.props.form;
        const formItemLayout = {
            labelCol:{span:4},
            wrapperCol:{span:12}
        }
        return (
            <Form layout="horizontal">
                <FormItem label="姓名" {...formItemLayout}>
                    {
                           type=='detail'?userInfo.username:
                        getFieldDecorator("user_name",{
                                initialValue:userInfo.username
                        })(
                            <Input type="text" placeholder="请输入性名" />
                        )
                    }
                </FormItem>
                <FormItem label="性别"  {...formItemLayout}>
                    {
                        type=="detail"?userInfo.sex==1?"男":"女":
                        getFieldDecorator("sex",{
                            initialValue:userInfo.sex
                        })(
                            <RadioGroup>
                                <Radio value={1}>男</Radio>
                                <Radio value={2}>女</Radio>
                            </RadioGroup>
                        )
                    }
                </FormItem>
                <FormItem label="状态" {...formItemLayout}>
                {
                     type=='detail'?this.getState(userInfo.state):
                    getFieldDecorator('state',{
                        initialValue:userInfo.state
                    })(
                      <Select>
                        <Option value={1}>咸鱼一条</Option>
                        <Option value={2}>鲤鱼打挺</Option>
                        <Option value={3}>金桔太没</Option>
                        <Option value={4}>又见面</Option>
                        <Option value={5}>咸鱼翻身</Option>
                      </Select>
                    )
                }
            </FormItem>
            <FormItem label="生日" {...formItemLayout}>
                {
                    type=='detail'?userInfo.birthday:
                    getFieldDecorator('birthday',{
                        initialValue:moment(userInfo.birthday)
                    })(
                      <DatePicker />
                    )
                }
            </FormItem>

            <FormItem label="联系地址" {...formItemLayout}>
            {
                  type=='detail'?userInfo.address:
                getFieldDecorator('address',{
                    initialValue:userInfo.address
                })(
                  <TextArea rows={3} placeholder="请输入联系地址" />
                )
            }
        </FormItem>
            </Form>
        )
    }
}
FilterForm=Form.create({})(FilterForm)